<template>
  <div>
    <el-upload
      :action="options.action"
      :list-type="options.listType"
      :accept="options.accept"
      :auto-upload="options.autoUpload"
      :file-list="fileList"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :on-change="handleChange"
      :disabled="options.disabled"
      :limit="options.limit"
      :on-exceed="options.limit === 1 ? handleExceed : null"
    >
      <i v-if="options.listType == 'picture-card'" class="el-icon-plus" />
      <el-button v-else-if="options.listType == 'text'" size="small" type="primary">请选择文件</el-button>
      <template v-if="isTip">
        <div v-if="!options.disabled" slot="tip" class="el-upload__tip">上传附件不能超过10MB</div>
      </template>
    </el-upload>
    <!-- 文件预览弹框 -->
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body top="7vh" class="dialogBox" width="70%" title="文件预览">
      <img v-if="imageUrl" width="100%" :src="imageUrl">
      <object
        v-if="pdfUrl"
        :data="pdfUrl"
        type="application/pdf"
        width="100%"
        height="100%"
        internalinstanceid="5"
        class="pdfBox"
      />
      <!-- <previewXlsx v-if="xlsxUrl" :xlsx-url="xlsxUrl" /> -->
      <previewDocx v-if="docxUrl" :docx-url="docxUrl" />
    </el-dialog>
  </div>
</template>

<script>
import pdfFileIcon from '@/assets/file-pdf-fill.png'
import xlsxFileIcon from '@/assets/xlsx.png'
import wordFileIcon from '@/assets/word.png'
// import previewXlsx from '../previewXlsx.vue'
import previewDocx from '../previewDocx.vue'
export default {
  name: 'UploadFile',
  components: {  previewDocx },
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          accept: 'image/png, image/gif, image/jpg, image/jpeg, application/pdf',
          action: 'https://jsonplaceholder.typicode.com/posts/',
          autoUpload: false,
          listType: 'picture-card',
          disabled: false,
          limit: 20
        }
      }
    },
    fileVal: {
      type: Array,
      default: () => []
    },
    fileLists: {
      type: Array,
      default: () => []
    },
    isTip: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      xlsTypeList: ['xlsx', 'xls'], // xls文件类型列表
      docTypeList: ['docx', 'doc'], // word文件类型列表
      xlsxUrl: '',
      docxUrl: '',
      dialogVisible: false, // 预览弹框
      imageUrl: null, // 预览的图片地址
      pdfUrl: '', // 预览的pdf格式数据
      fileList: this.fileVal // 上传的文件list
    }
  },
  methods: {
    /**
     * @description: 查看上传的文件
     * @param {*} file
     */
    handlePreview(file) {
      this.imageUrl = null
      this.xlsxUrl = ''
      this.docxUrl = ''
      this.pdfUrl = ''
      const fileType = file.name.substr(file.name.lastIndexOf('.') + 1)
      if (file.raw) {
        // 本地上传的 不区分大小写
        if (this.xlsTypeList.includes(fileType.toLowerCase())) {
          this.xlsxUrl = URL.createObjectURL(file.raw)
        } else if (this.docTypeList.includes(fileType.toLowerCase())) {
          this.docxUrl = new Blob([file.raw])
        } else if (fileType.toLowerCase() === 'pdf') {
          this.pdfUrl = URL.createObjectURL(file.raw)
        } else {
          this.imageUrl = URL.createObjectURL(file.raw)
        }
      } else {
        // 网络地址 不区分大小写
        if (this.xlsTypeList.includes(fileType.toLowerCase())) {
          this.xlsxUrl = file.filePath
        } else if (this.docTypeList.includes(fileType.toLowerCase())) {
          this.docxUrl = file.filePath
        } else if (fileType.toLowerCase() === 'pdf') {
          this.pdfUrl = file.filePath
        } else {
          this.imageUrl = file.filePath
        }
      }
      this.dialogVisible = true
    },
    /**
     * @description: 删除
     * @param {*} file
     */
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    /**
     * @description: 改变监听
     * @param {*} file
     * @param {*} fileList
     */
    handleChange(file, fileList) {
      const str = this.options.accept
      // 找不到返回null
      const reg = new RegExp(file.name.substring(file.name.lastIndexOf('.')), 'i')
      const isUpload = reg.test(str)
      if (!isUpload) {
        fileList.pop()
        this.$message({
          message: `请上传${this.options.accept}格式文件,后缀不区分大小写!`,
          type: 'warning'
        })
      } else {
        const { name } = file
        // 获取文件后缀
        const ext = name.substr(name.lastIndexOf('.') + 1)
        if (ext.toLowerCase() === 'pdf') {
          const { length, last = length - 1 } = fileList
          fileList[last] = { name: file.name, url: pdfFileIcon, raw: file.raw }
        } else if (this.xlsTypeList.includes(ext.toLowerCase())) {
          const { length, last = length - 1 } = fileList
          fileList[last] = { name: file.name, url: xlsxFileIcon, raw: file.raw }
        } else if (this.docTypeList.includes(ext.toLowerCase())) {
          const { length, last = length - 1 } = fileList
          fileList[last] = { name: file.name, url: wordFileIcon, raw: file.raw }
        } else {
          console.log('🚀 ~ file: index.vue:172 ~ handleChange ~ file, fileList', file, fileList)
        }
        this.fileList = fileList
      }
    },
    /**
     * @description: 最终提交的file
     */
    getUploadFileList() {
      return this.fileList
    },
    /**
     * @description: 赋值
     * @param {*} list
     */
    setUploadFileList(list) {
      if (list && list.length > 0) {
        list.forEach((v) => {
          const fileType = v.name.substr(v.name.lastIndexOf('.') + 1)
          if (this.xlsTypeList.includes(fileType.toLowerCase())) {
            v.url = xlsxFileIcon
          } else if (this.docTypeList.includes(fileType.toLowerCase())) {
            v.url = wordFileIcon
          } else if (fileType.toLowerCase() === 'pdf') {
            v.url = pdfFileIcon
          } else {
            v.url = v.filePath
          }
        })
      }
      this.fileList = list
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
  width: 68px;
  height: 68px;
  line-height: 70px;
  .el-icon-plus {
    font-size: 22px;
  }
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 68px;
  height: 68px;
}
.previewImgDialog  ::v-deep{
  .el-dialog__body {
    height: 620px;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.dialogBox {
  display: flex;
  overflow: hidden;
  .el-dialog {
    margin-top: 9vh !important;
    margin-bottom: 8vh !important;
    overflow: auto;
    .el-dialog__body {
      position: absolute;
      left: 0px;
      top: 54px;
      bottom: 72px;
      right: 0px;
      overflow-y: auto;
      padding-bottom: 0px;
    }
  }
}
::v-deep .el-upload__tip {
  font-size: 12px;
  color: red;
  line-height: 20px;
}
</style>
